/*
 * CSS样式说明：
 *   .fade 用作隐藏界面的样式类
 *   .in 用作显示界面的样式类
 * 请在下面空白处编写对应的JS代码；
 * */
let isAdd = true;
let _tr;//编辑的tr
$(function () {
    $("#add,#circle,#cancle").click(function () {
        $("#personDetail").toggleClass("in");
    })

    $("#myFrom").submit(function () {
        var edit_name = $("#edit_name").val();
        var edit_age = $("#edit_age").val();
        var edit_position = $("#edit_position").val();
        var edit_mobile = $("#edit_mobile").val();
        var edit_email = $("#edit_email").val();


        if (edit_name == "") {
            $("#edit_name").addClass("red");
            return false;
        }
        $("#edit_name").removeClass("red");

        if (edit_age == "") {
            $("#edit_age").addClass("red");
            return false;
        }
        $("#edit_age").removeClass("red");

        if (edit_position == "") {
            $("#edit_position").addClass("red");
            return false;
        }
        $("#edit_position").removeClass("red");

        if (edit_mobile == "") {
            $("#edit_mobile").addClass("red");
            return false;
        }
        $("#edit_mobile").removeClass("red");

        if (isAdd) {
            var tr = $("<tr >\n" +
                "            <td name=\"name\">" + edit_name + "</td>\n" +
                "            <td name=\"age\">" + edit_age + "</td>\n" +
                "            <td name=\"position\">" + edit_position + "</td>\n" +
                "            <td name=\"mobile\">" + edit_mobile + "</td>\n" +
                "            <td name=\"email\">" + edit_email + "</td>\n" +
                "            <td name=\"option\">\n" +
                "                <i class=\"fa fa-pencil-square-o\" title=\"编辑\" aria-hidden=\"true\"></i>\n" +
                "                <i class=\"fa fa-trash\"  title=\"删除\" aria-hidden=\"true\"></i>\n" +
                "            </td>\n" +
                "        </tr>");
            $("#myTable").append(tr);
            tr.find(".fa.fa-trash").bind("click", function () {
                $(this).closest("tr").remove()
            })
            tr.find(".fa.fa-pencil-square-o").bind("click", function () {
                isAdd = false;
                _tr = $(this).closest("tr");
                $("#personDetail").toggleClass("in");
                $("#edit_name").val(tr.find("td[name='name']").text());
                $("#edit_age").val(tr.find("td[name='age']").text());
                $("#edit_position").val(tr.find("td[name='position']").text());
                $("#edit_mobile").val(tr.find("td[name='mobile']").text());
                $("#edit_email").val(tr.find("td[name='email']").text());
            })
        }else{
            _tr.find("td[name='name']").text(edit_name);
            _tr.find("td[name='age']").text(edit_age);
            _tr.find("td[name='position']").text(edit_position);
            _tr.find("td[name='mobile']").text(edit_mobile);
            _tr.find("td[name='email']").text(edit_email);
        }
        $("#myFrom :input").not(":button,:submit,:reset,:hidden").val("")
            .removeAttr("checked")
            .removeAttr("selected");
        $("#personDetail").toggleClass("in");
        return false;
    })

    $(".fa.fa-trash").click(function () {
        $(this).closest("tr").remove()
    })
    $(".fa.fa-pencil-square-o").click(function () {
        isAdd = false;
        _tr = $(this).closest("tr");
        $("#personDetail").toggleClass("in");
        $("#edit_name").val(_tr.find("td[name='name']").text());
        $("#edit_age").val(_tr.find("td[name='age']").text());
        $("#edit_position").val(_tr.find("td[name='position']").text());
        $("#edit_mobile").val(_tr.find("td[name='mobile']").text());
        $("#edit_email").val(_tr.find("td[name='email']").text());
    })
})